<template>
    <div>
        <div class="e-h-400" ref="chart" :id="id"></div>
        <!-- <div>{{ data }}}</div> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    watch: {
        data(val) {
            var chartDom = document.getElementById(this.id);
            var myChart = echarts.init(chartDom);
            var option;
            console.log(val, myChart, chartDom, 'datassss')
            var xAxisdata = []
            var seriesdata1 = []
            var seriesdata2 = []
            if (this.data && this.data.length > 0) {
                this.data.forEach((item) => {

                    console.log(item, 'item')
                    xAxisdata.push(item.type)
                    seriesdata1.push(item.recycling)
                    seriesdata2.push(item.delivery)
                })

                this.$forceUpdate()

            }
            option = {
                title: {
                    // text: 'World Population'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: xAxisdata
                },
                series: [
                    {
                        name: '回收量（KG/件）',
                        type: 'bar',
                        data: seriesdata1
                    },
                    
                ]
            };
            option && myChart.setOption(option);
        }
    },
    mounted() {

        console.log('mountedID', this.id)
        console.log('data', this.data)

        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var xAxisdata = []
        var seriesdata1 = []
        var seriesdata2 = []

        if (this.data && this.data.length > 0) {
            this.data.forEach((item) => {

                console.log(item, 'item')
                xAxisdata.unshift(item.type)
                seriesdata1.unshift(item.recycling)
                seriesdata2.unshift(item.delivery)
            })

            this.$forceUpdate()

        }

        option = {
            title: {
                // text: 'World Population'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: xAxisdata
            },
            series: [
                {
                    name: '回收量（KG/件）',
                    type: 'bar',
                    data: seriesdata1
                },
                {
                    name: '出库量（KG/件）',
                    type: 'bar',
                    data: seriesdata2
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped></style>